<template>
  <view class="page">
    <view class="tigcard">
      <image class="img" src="../../../static/images/icon/success.png" mode=""></image>
      <view class="">
        <view class="success">
          预约成功
        </view>
        <view class="tip">
          请按预约时间准时到校医院进行体检，请仔细阅读体检须知
          <span class="more" @click="toNotice">?</span>
        </view>
      </view>
    </view>
    
    <view class="tcard">
      <view class="title">
        体检信息
      </view>
      <view class="tform">
        <view class="tform-item">
          <view class="label">
            体检人
          </view>
          <view class="value">
            {{userInfo.name}}
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            体检地址
          </view>
          <view class="value">
            西南财经大学校医院
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            套餐名称
          </view>
          <view class="value">
            {{pkg.companyName}}
          </view>
        </view>
        <!-- <view class="tform-item">
          <view class="label">
            自选项目
          </view>
          <view class="value">
            xx
          </view>
        </view> -->
        <view class="tform-item">
          <view class="label">
            体检时间
          </view>
          <view class="value">
            {{ opt.time }}
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            体检项明细
          </view>
          <view class="mingxi" @click="toMingxi">
            项目明细 >
          </view>
        </view>
      </view>
    </view>
    
    <view class="tcard" style="margin-bottom: 120upx;">
      <view class="title">
        订单信息
      </view>
      <view class="tform">
        <view class="tform-item">
          <view class="label">
            订单类型
          </view>
          <view class="value">
            团检
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            订单金额
          </view>
          <view class="value">
            ￥0
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            订单编号
          </view>
          <view class="value">
            {{opt.orderId}}
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            下单时间
          </view>
          <view class="value">
            {{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}
          </view>
        </view>
      </view>
    </view>
    
    <view class="pay">
      <view class="light btn" @click="backHome">
        返回首页
      </view>
      <!-- <view class="btn" @click="cancalGroup">
        取消预约
      </view> -->
    </view>
  </view>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import {cancalGroup} from '@/api/physical.js'
  import dayjs from 'dayjs'
  export default {
    data() {
      return {
        dayjs,
        opt: {},
        pkg: {}
      }
    },
    computed:{
      ...mapGetters(['userInfo']),
    },
    onLoad(opt) {
      this.opt = opt
      this.pkg = JSON.parse(opt.pkg)
      console.log(opt.pkg)
    },
    methods: {
      toMingxi() {
        uni.navigateTo({
          // url: '../Mingxi/Mingxi?checkItems=' + JSON.stringify(this.checkItems),
          url: `../Mingxi/Mingxi?pkg=${JSON.stringify(this.pkg)}&baseItems=${JSON.stringify(this.baseItems)}`,
        })
      },
      toNotice() {
        uni.navigateTo({
          url: `../PhysicalNotice/PhysicalNotice`,
        })
      },
      backHome() {
        uni.navigateTo({
          url: `/pages/Index`,
        })
      },
      cancalGroup() {
        uni.showLoading({
          
        })
        const data = {
          dealCode: this.opt.orderId
        }
        cancalGroup(data).then(res => {
          uni.hideLoading()
          
          this.$u.toast('取消成功')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.tigcard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32upx;
  background-color: #FFF;
  border-radius: 8upx;
  margin-bottom: 24upx;
  .img {
    width: 156upx;
    height: 156upx;
    margin-right: 24upx;
    flex-shrink: 0;
  }
  .success {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 36upx;
    color: #366AA4;
    line-height: 54upx;
  }
  .tip {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.7);
    line-height: 42upx;
  }
}
.mingxi {
  color: $theme-color;
}
.pay {
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 108upx;
  padding: 0 32upx;
  box-shadow: 0px -8px 76px 22px rgba(227,237,255,0.58);
  background-color: #FFF;
  .btn {
    width: 460upx;
    height: 64upx;
    background: #366AA4;
    border-radius: 64upx;
    text-align: center;
    line-height: 64upx;
    color: #FFF;
  }
  .light {
    background: transparent;
    border: 1px solid $theme-color;
    color: $theme-color;
  }
}
.tform {
  .tform-item {
      padding-left: 0;
      padding-right: 0;
    .label {
      // flex: 1;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .value {
      padding: 0;
      // flex: 1;
      white-space: pre-wrap;
      overflow: auto;
      word-wrap:break-word;
    }
  }
}
.more {
  display: inline-block;
  width: 24upx;
  height: 24upx;
  border: 1px solid #366AA4;
  border-radius: 24upx;
  font-size: 24upx;
  line-height: 24upx;
  text-align: center;
  color: #366AA4;
  margin-left: 12upx;
}
</style>
